<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter :functional-group-id="functionalGroupId" />
      </div>
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        :multiple-selected="multipleSelected"
        @page-change="onPageChange"
        @sort-change="onSortChange"
        @selection-change="onSelectionChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>
  </div>
</template>

<script>
// 表格查询组件独立编写，需要传递pageable-table实例的mixin方法filter
import TableFilter from './userTableFilter'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import {
  userPage,
  remove
} from '@neu/dcom-ui/api/functional'
export default {
  name: 'UserFunctionalPage',
  components: {
    TableFilter,
    PageableTable
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  props: {
    multipleSelected: {
      type: Boolean,
      default: false,
      required: false
    },
    functionalGroupId: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      r: userPage,
      d: remove,
      insideColumns: [
        {
          title: '人员名称',
          key: 'name',
          sortable: 'custom'
        },
        {
          title: '人员编码',
          key: 'code',
          sortable: 'custom'
        }
      ],
      searchObj: {
        s_functionalGroupId: null
      }
    }
  },
  created() {
    this.searchObj['s_functionalGroupId'] = this.functionalGroupId
    this.filter(this.searchObj)
  }
}
</script>
